<%--
  Created by IntelliJ IDEA.
  User: qingx
  Date: 2018/12/12
  Time: 17:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- jsp文件头和头部 -->
    <%@ include file="../base/top.jsp"%>
    <link rel="stylesheet" href="static/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <style>
        .modal-dialog{
            z-index: 9999;
        }
    </style>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="hr hr-18 dotted hr-double"></div>
                <div class="row">
                    <div class="col-xs-12">

                        <form class="form-horizontal" role="form" style="display: -webkit-flex;-webkit-justify-content: center;-webkit-align-items: center;">
                            <div style="width: 70%;">
                                <div class="widget-box">

                                    <div class="widget-header" style="text-align: center">
                                        <h4 class="widget-title">修改授课</h4>
                                    </div>

                                    <div class="widget-main">

                                        <div>
                                            <label>课程名称</label>
                                            <br />
                                            <p class="form-control">${courseDetail.courseInfo.courseName}</p>
                                        </div>
                                        <hr />

                                        <div>
                                            <label>授课名称</label>
                                            <br />
                                            <p class="form-control">${courseDetail.teachCourseName}</p>
                                        </div>
                                        <hr />

                                        <div>
                                            <label>开设学期</label>
                                            <br />
                                            <p class="form-control">${courseDetail.courseInfo.courseStartTerm}</p>
                                        </div>
                                        <hr />

                                        <div>
                                            <label>阶段链</label>
                                            <br />
                                            <p class="form-control">${courseDetail.stageChain}</p>
                                        </div>
                                        <hr />

                                        <div>
                                            <label>授课教师</label>
                                            <br />
                                            <select class="chosen-select form-control" id="teacher" data-placeholder="Choose a State...">
                                                <c:forEach items="${teachingDetail.teacherInfos}" var="teacherInfo" varStatus="status">
                                                    <c:if test="${courseDetail.teaId == teacherInfo.teaId}">
                                                        <option value="${teacherInfo.teaId}" selected>${teacherInfo.teaName}</option>
                                                    </c:if>
                                                    <c:if test="${courseDetail.teaId != teacherInfo.teaId}">
                                                        <option value="${teacherInfo.teaId}">${teacherInfo.teaName}</option>
                                                    </c:if>
                                                </c:forEach>
                                            </select>
                                        </div>
                                        <hr />

                                        <div>
                                            <label>标签库</label>
                                            <br />
                                            <select class="chosen-select form-control" id="label-lib" data-placeholder="Choose a State...">
                                                <c:forEach items="${teachingDetail.labelLibInfos}" var="labelLibInfo" varStatus="status">
                                                    <c:if test="${courseDetail.labelLibId == labelLibInfo.labelLibId}">
                                                        <option value="${labelLibInfo.labelLibId}" selected>${labelLibInfo.labelLibName}</option>
                                                    </c:if>
                                                    <c:if test="${courseDetail.labelLibId != labelLibInfo.labelLibId}">
                                                        <option value="${labelLibInfo.labelLibId}">${labelLibInfo.labelLibName}</option>
                                                    </c:if>
                                                </c:forEach>
                                            </select>
                                        </div>
                                        <hr />

                                        <div>
                                            <label for="form-field-select-2">选课学生</label>
                                            <input class="chosen-select form-control" id="stuSelect" readonly="readonly"/>
                                            <div class="form-control" id="form-field-select-2" style="height: 200px;overflow: auto;">
                                                <div>
                                                    <c:forEach items="${teachingDetail.classInfos}" var="classInfo" varStatus="classStatus">
                                                        <label>
                                                            <input name="form-field-checkbox" id="${classStatus.index}" class="ace ace-checkbox-2" type="checkbox" value="${classInfo}" onclick="checkboxOnclick(this)"/>
                                                            <span class="lbl" >${classInfo}</span>
                                                            <div class="inline position-relative">
                                                                <a href="#"  data-toggle="modal" data-target="#myModal${classStatus.index}">
                                                                    <label>展开</label>
                                                                </a>
                                                            </div>
                                                        </label>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                                        <div class="modal inmodal" id="myModal${classStatus.index}" tabindex="-1" role="dialog" aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content animated bounceInRight">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal">
                                                                            <span aria-hidden="true">&times;</span>
                                                                            <span class="sr-only">关闭</span>
                                                                        </button>

                                                                        <h4 class="modal-title" align="center">Select Student</h4>

                                                                    </div>
                                                                    <div class="modal-body">

                                                                        <c:forEach items="${teachingDetail.studentInfos}" var="studentInfo" varStatus="status">
                                                                            <c:if test="${classInfo ==studentInfo.stuClass}">
                                                                                <label>
                                                                                    <input name="${classInfo}" id="${studentInfo.stuId}" class="ace ace-checkbox-2" type="checkbox"
                                                                                           value="${studentInfo.stuId}" onclick="checkboxOnclick(this)"/>
                                                                                    <span class="lbl">${studentInfo.stuName}</span>
                                                                                </label>
                                                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                                            </c:if>
                                                                        </c:forEach>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                                                            <%-- <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>--%>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </c:forEach>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="clearfix form-actions" align="center">
                                            <button class="btn btn-info" type="button" onclick="modifyTeachCourse()">
                                                Submit
                                            </button> &nbsp; &nbsp; &nbsp;
                                            <button class="btn" type="reset">
                                                Reset
                                            </button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>

</div>
<!-- /.main-container -->
<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp"%>
<script type="text/javascript">
//    $(top.hangge());

    $(function () {
        checkSelectCourseStudents();
        //下拉框
        if(!ace.vars['touch']) {
            $('.chosen-select').chosen({allow_single_deselect:true});
            $(window)
                .off('resize.chosen')
                .on('resize.chosen', function() {
                    $('.chosen-select').each(function() {
                        var $this = $(this);
                        $this.next().css({'width': $this.parent().width()});
                    });
                }).trigger('resize.chosen');
            $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
                if(event_name != 'sidebar_collapsed') return;
                $('.chosen-select').each(function() {
                    var $this = $(this);
                    $this.next().css({'width': $this.parent().width()});
                });
            });
            $('#chosen-multiple-style .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
                else $('#form-field-select-4').removeClass('tag-input-style');
            });
        }

    });
</script>
<script>
    $(document).ready(function () {
        checkSelectCourseStudents();
    })
   function checkboxOnclick(checkbox){
        if ( checkbox.checked == true){
            //全选
            var id = document.getElementById(checkbox.id).id;
            var value = document.getElementById(checkbox.id).value;
            if(id.length < 2){
                var items=document.getElementsByName(value);
                for(var i=0;i<items.length;i++){
                    items[i].checked=true;
                }

                //给学生选择框赋值
                var stu = document.getElementById(checkbox.id).value;
                var stuSelected = document.getElementById("stuSelect");
                if(stuSelected.value!="")
                    stuSelected.value=stuSelected.value+"、";
                stuSelected.value = stuSelected.value+stu;
            }
        }else{
            var id = document.getElementById(checkbox.id).id;
            var value = document.getElementById(checkbox.id).value;
            if(id.length < 2){
                var items=document.getElementsByName(value);
                for(var i=0;i<items.length;i++){
                    items[i].checked=false;
                }

                //给学生选择框赋值
                var stu = document.getElementById(checkbox.id).value;
                var stuSelected = document.getElementById("stuSelect");
                var str = stuSelected.value.split(stu);
                if(str[0]=="")
                    str[1]=str[1].substring(1);
                else
                    str[0]=str[0].substring(0,str[0].length-1);
                stuSelected.value = str[0]+str[1];
            }
        }
    }
    
    function modifyTeachCourse() {
        var stuId = [];
        $("input[type='checkbox']:checked").each(function(j) {
            if (j >= 0) {
                if($(this).val().length == 10){
                    stuId.push($(this).val());
                }
            }
        });

        if(checkFormats()){
            var data = {
                teachCourseId:'${courseDetail.teachCourseId}',
                teaId:$("#teacher").val(),
                labelLibId:$("#label-lib").val(),
                stuIds:stuId
            }
            console.log(data);
            $.ajax({
                type: "POST",
                url: "<%=basePath%>teach_course/editTeachCourseInfo",
                data: data,
                dataType:"json",
                success: function(data){
                    if(data["success"]==true){
                        prompt_alert('success',data["msg"],0);
                    }else{
                        prompt_alert('error',data["msg"],0);
                    }
                },
                error:function(msg){
                    prompt_alert('error',"失败！",0);
                }
            });
        }
    }
    //数据校验
    function checkFormats() {
        if($("#teacher").val() == "") {
            prompt_alert('warning',"授课教师不得为空",0);
            return false;
        }
        if($("#label-lib").val() == "") {
            prompt_alert('warning',"标签库不得为空",0);
            return false;
        }
        return true;
    }
    //选中已经选课了的学生
    function checkSelectCourseStudents() {
        var json = ${selectCourseStudnetsJson};
        //var json = JSON.parse(selectCourseStudnetsJson);
        //alert(json.length);
        if(json!=null && json.length>0){
            for(var i=0;i<json.length;i++){
                $("#"+json[i].stuId).prop("checked",true);
            }
        }
    }

</script>
</body>
</html>

